<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	pageContext.setAttribute("basePath", basePath);
%>
<link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap/fileinput.min.css">
<link rel="stylesheet" type="text/css" href="${basePath}js/layer.2.4/layui.css">


<script type="text/javascript" src='${basePath}js/jquery.min.js'></script>
<script type="text/javascript" src='${basePath}js/bootstrap/bootstrap.min.js'></script>
<script type="text/javascript" src='${basePath}js/layer.2.4/layer.js'></script>
<script type="text/javascript" src='${basePath}js/fy.utils.js'></script>
<style>
	body,html {
		padding: 0;
		margin: 0;
	}
	
	.im-header {
		width:100%;
		height: 65px;
		background: #F9f9f9;
		border-bottom:1px solid #eee;
	}
	
	.im-header .im-face-box,.im-info-box {
		float: left;
	}
	
	.im-header .im-face-box {
		width: 80px;
		height: 54px;
		border-radius: 54px;
		padding: 5px 5px 5px 20px;
	}
	
	.im-header .im-face-box>img {
		width: 54px;
		height: 54px;
		border-radius: 54px;
	}
	
	.im-header .im-info-box {
		width:205px;
		margin-left: 10px;
		overflow: hidden;
	}
	
	.im-header .im-info-box p {
		font-size: 12px;
		line-height: 20px;
		height: 20px;
		padding: 2px;
		margin: 2px;
	}
	
	/* 消息显示框样式  */
	.im-content {
		
	}
	
	.im-content #msg-show,#msg-input,#msg-btns {
		width:100%;
	}	
	
	.im-content #msg-show {
		height:160px;
		padding:5px;
		overflow-y: auto;
	}	
	
	.im-content #msg-show .msg-item {
		height:auto;
	}	
	
	#msg-show .msg-item .msg-title,.msg-content {
		min-height:40px;
	}
	
	#msg-show .msg-item .msg-content {
		padding:5px;
		margin-bottom:10px;
	}	

	#msg-show .msg-title .mt-face  {
		width:32px;
		height:32px;
		border-radius:32px;
		margin-right:5px;
	}		
	
	#msg-show .msg-title .mt-face,.mt-name {
		float:left;
	}

	#msg-show .msg-title .mt-name {
		line-height:35px;
		font-size:14px;
	}
	
	#msg-show .msg-title .mt-name span {
		padding-left:5px;
	}	
	
	/* 消息输入框格式   */		
	.im-content #msg-input {
		height:60px;
		position: absolute;
		bottom:40px;
		padding:5px;
		border-top:5px solid #eee;
		overflow-y: auto;
		word-wrap: break-word;
		outline:none;
	}	
	
	.im-content #msg-btns {
		height:40px;
		position: absolute;
		bottom:0;
		padding-right:5px;
		padding-top:2px;
	}
	
	.im-content #msg-btns button {
		font-size:12px !important;
	}
		
	
</style>

<div class="im-header">
	<div class="im-face-box">
		<img alt="" src="${basePath}images/face.jpg" width="100%">
	</div>
	<div class="im-info-box">
		<p id="nickname">zeke</p>
		<p id="signature">PQ 实验田,来搞一个自己的聊天工具</p>
	</div>
</div>


<div class="im-content">
	<div id="msg-show"></div>
	<div id="msg-input" contenteditable="true"> </div>
	<div id="msg-btns" >
		<button type="button" id="msg-send" class="btn btn-success btn-xs pull-right">
			<i class="iconfont icon-qtsfkuan"></i> 发  送 
		</button>
	</div>
</div>





<script type="text/javascript">
	$(function(){
		/* 打开窗口光标设置在输入框 */
		$("#msg-input").focus();
	});
	

</script>
